到目前為止，我們的功能基本上都已經完成了。
現在user可以針對Todo進行各種操作。

• 新增Todo
• 查看Todo
• 更新Todo
• 刪除Todo
  已經具備了CRUD的功能，並且資料已經透過redux的store進行集中管理。接下來我們希望可以有一個登入頁面，讓user可以進行註冊 & 登入。

首先，關於登入頁面我們會想到，畫面上會有輸入帳號/email & 密碼的欄位，並且會有登入 & 註冊一共2個按鈕。

現在我們可以先開始處理UI的部分，首先我們先建立一個區塊用於放置輸入欄位 & 兩個按鈕，

<div className="my-8 w-full flex flex-col md:flex-row">
    <label className="w-[30%] min-w-[100px] text-2xl italic font-bold text-gray-500">
        email：
    </label>
    <div className="flex-1">
        <input
            type="input"
            className="w-full py-2 border-2 rounded-md focus-visible:outline-none pl-4 text-gray-500"
            placeholder="請輸入email"
        />
    </div>
</div>
<div className="my-8 w-full flex flex-col md:flex-row">
    <label className="w-[30%] min-w-[100px] text-2xl italic font-bold text-gray-500">
        密碼：
    </label>
    <div className="flex-1">
        <input
            type="password"
            className="w-full py-2 border-2 rounded-md focus-visible:outline-none pl-4 text-gray-500"
            placeholder="請輸入密碼"
        />
    </div>
</div>

現在我們已經有一個包含欄位 & 按鍵的區塊，可以看到mail & 密碼的結構基本上是一致的，所以我們可以把這段抽出來做成 component

const TextInput = forwardRef(
  (
    { label, type, placeholder, InputOnChange = () => {} },
    ref
  ) => {
    return (
      <div className="my-8 w-full flex flex-col md:flex-row">
        <label className="w-[30%] min-w-[100px] text-2xl italic font-bold text-gray-500">
          {label}：
        </label>
        <div className="flex-1">
          <input
            type={type}
            className="w-full py-2 border-2 rounded-md focus-visible:outline-none pl-4 text-gray-500"
            placeholder={placeholder}
          />
        </div>
      </div>
    );
  }
);

因為是會需要使用到輸入資料的元件，所以我們將onchange作為參數，把邏輯丟到父層，接下來的參數就是其餘的常用欄位。

到目前為止現在我們的登入的UI部分已經完成了。

這邊要注意的就是 component 中，我們將onChange的事件作為參數丟出來的時候，因為在我們帶入資料之前會是空的，這有機會導致畫面炸掉，所以我們這邊使用預設value，給他一個()=>{}空的函式，確保在onchange的處理函式帶入之前不會壞掉。